<template>
  <div class="common-pagination" :class="[`common-pagination--${position}`]" v-if="pagination">
    <el-pagination
      :background="isModifyBackground"
      small
      v-bind="options"
      @size-change="handleChange($event, 'size')"
      @current-change="handleChange($event, 'page')"
    ></el-pagination>
  </div>
</template>

<script>
const defaultOption = {
  total: 0,
  currentPage: 1,
  pageSize: 15,
  layout: 'prev, pager, next, total',
}

export default {
  name: 'BasePagination',
  props: {
    pagination: {
      type: [Object, Boolean],
      default: () => ({}),
    },
    isModifyBackground: {
      type: Boolean,
      default: false,
    },
    onChange: Function,
  },
  computed: {
    position() {
      return this.pagination.position || 'right'
    },
    options() {
      return {
        ...defaultOption,
        ...this.pagination,
        currentPage: this.pagination.pageNo || this.pagination.currentPage,
      }
    },
  },
  methods: {
    handleChange(val, action) {
      let { currentPage: pageNo, pageSize } = this.options

      if (action === 'page') {
        pageNo = val
      }

      if (action === 'size') {
        pageNo = 1
        pageSize = val
      }
      if (this.onChange) {
        this.onChange({ pageNo, pageSize })
      }
      this.$emit('change', { pageNo, pageSize })
    },
  },
}
</script>

<style lang="scss" scoped>
.common-pagination {
  display: flex;

  &--left {
    justify-content: flex-start;
  }

  &--center {
    justify-content: center;
  }

  &--right {
    justify-content: flex-end;
  }
}
</style>
